<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>三维场景</title>
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
</head>

<body>
  <script>
    window.onload = function(){
      init();
    }
    function init() {
      /* 创建场景对象 */
      let scene = new THREE.Scene();
      let customerGeometry = createCustomerGeometry();
      let material = new THREE.MeshBasicMaterial({
        vertexColors: THREE.VertexColors, //三角面颜色
        side: THREE.DoubleSide //两面可见
      }); //材质对象
      let mesh = new THREE.Line(customerGeometry, material); //网格模型对象Mesh
      scene.add(mesh);

      /* 添加调试辅助坐标 */
      let axisHelper = new THREE.AxisHelper(250);
      scene.add(axisHelper);

      /**
       * 光源设置
       */
      //点光源
      let point = new THREE.PointLight(0xffffff);
      point.position.set(300, 400, 300); //点光源位置上  // 每个参数控制不同的面的亮度
      scene.add(point); //点光源添加到场景中
      /* 相机设置 */
      let width = window.innerWidth; //窗口宽度
      let height = window.innerHeight; //窗口高度
      let k = width / height; //窗口宽高比
      let s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象 （正交相机，保持比例）
      let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
      camera.position.set(100, 100, 200); //设置相机位置
      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
      let renderer = new THREE.WebGLRenderer({
        antialias: true
      });
      renderer.setSize(width, height); //设置渲染区域尺寸
      renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
      document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
      //执行渲染操作   指定场景、相机作为参数
      renderer.render(scene, camera); 
    }
    /**
     * 通过BufferGeometry 和 BufferAttribute 定义一个6个定点的数据几何体
     */
    function createCustomerGeometry() {
      // 声明一个几何体对象Geometry
      let geometry = new THREE.Geometry();
      let p1 = new THREE.Vector3(50, 0, 0); // 顶点1坐标
      let p2 = new THREE.Vector3(0, 70, 0); // 顶点2坐标
      let p3 = new THREE.Vector3(80, 70, 0); // 顶点3坐标
      // 将顶点坐标添加到Geometry对象。 顺序一致性
      geometry.vertices.push(p1,p2,p3);

      // color对象标识顶点颜色数据
      let color1 = new THREE.Color(0x00ff00); // 顶点1有颜色-绿色
      let color2 = new THREE.Color(0xff0000); //顶点2颜色-红色
      let color3 = new THREE.Color(0x0000ff); //顶点3颜色-蓝色
      geometry.colors.push(color1,color2,color3);

      return geometry;
    }
  </script>
</body>

</html>